<template>
    <div>
          <el-container>
            <el-header>商品信息管理界面</el-header>
            <el-container>
                <el-aside style="border: 5px solid #eee">
                    <el-menu>
                       
                        <el-submenu index="1">
                            <!-- 子菜单命名 -->
                             <template slot="title">
                                <span>基本信息管理</span>
                            </template>

                            <!-- 子菜单选项 -->
                            <el-menu-item-group>
                                <router-link to="/cus">
                                   <el-menu-item index="1-1">客户管理</el-menu-item>
                                </router-link>
                                <router-link to="/goods">
                                   <el-menu-item index="1-2">商品管理</el-menu-item>
                                </router-link>
                                <router-link to="/emp">
                                    <el-menu-item index="1-3">员工管理</el-menu-item>
                                </router-link> 
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="2">
                            <!-- 子菜单命名 -->
                             <template slot="title">
                                <span>采购信息管理</span>
                            </template>
                            
                            <!-- 子菜单选项 -->
                            <el-menu-item-group>
                                <router-link to="/mainBuy">
                                    <el-menu-item index="2-1">采购主表管理</el-menu-item>
                                </router-link>
                                <router-link to="/payDetail">
                                    <el-menu-item index="2-2">采购明细管理</el-menu-item>
                                </router-link>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main >
                    <el-button type="primary" round @click=" dialogVisible1 = true">查询商品</el-button>
                    <el-dialog
                    title="查询商品"
                    :visible.sync="dialogVisible1"
                    width="20%"
                    >   
                        <el-form>
                        <el-form-item label="请输入商品的编号">
                            <el-input v-model="askgoods.gid"></el-input>
                        </el-form-item>
                        </el-form>

                        <span slot="footer" >
                        <el-button @click="dialogVisible1 = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible1 = false,select(askgoods.gid)">确 定</el-button>
                        </span>
                    </el-dialog>


                     <el-dialog
                    title="查询商品结果"
                    :visible.sync="selectRes"

                    width="75%"
                    >
                        <!-- <el-form>

                        <el-form-item label="商品编号:">
                            {{askgoods.gid}}
                        </el-form-item>
                        <el-form-item label="商品名称:">
                            {{askgoods.gname}}
                        </el-form-item>
                        <el-form-item label="商品单价:">
                            {{askgoods.gpay}}
                        </el-form-item>
                        <el-form-item label="客户编号:">
                            {{askgoods.cid}}
                        </el-form-item>
                        <el-form-item label="商品简介:">
                            {{askgoods.gintroduction}}
                        </el-form-item>
                        <el-form-item label="备注:">
                            {{askgoods.other}}
                        </el-form-item>
                    
                        </el-form> -->
                          <el-table :data="tmptb" border stripe style="width: 100%">
                      <el-table-column prop="gid" label="商品编号" width="150" ></el-table-column>
                      <el-table-column prop="gname" label="商品名称" width="150" ></el-table-column>
                      <el-table-column prop="gpay" label="商品单价" width="150" ></el-table-column>
                      <el-table-column prop="cid" label="客户编号" width="150"></el-table-column>
                      <el-table-column prop="gintroduction" label="商品简介" width="150" ></el-table-column>
                      <el-table-column prop="other" label="备注" width="150" ></el-table-column>
                    </el-table>
                    <el-button @click="selectRes = false">退出</el-button>
                
                 </el-dialog>







                    <el-button type="primary" round @click="dialogVisible2 = true">删除商品</el-button>
                    <el-dialog
                    title="删除商品"
                    :visible.sync="dialogVisible2"
                    width="20%"
                    >
                    <el-form>
                    <el-form-item label="请输入商品的编号">
                        <el-input v-model="rmgoods.gid"></el-input>
                    </el-form-item>
                    </el-form>

                    <span slot="footer" >
                    <el-button @click="dialogVisible2 = false">取 消</el-button>
                    <el-button type="primary" @click="dialogVisible2 = false,remove()">确 定</el-button>
                    </span>
                    </el-dialog>








                    <el-button type="primary" round @click="dialogVisible3 = true">修改商品</el-button>
                    
                    <el-dialog
                    title="修改商品信息"
                    :visible.sync="dialogVisible3"
                    width="20%"
                    >
                    <el-form>
                        <el-form-item label="请输入商品的编号">
                        <el-input v-model="updategoods.gid"></el-input>
                        </el-form-item>
                    </el-form>
                    
                    <span slot="footer" >
                        <el-button @click="dialogVisible3 = false">取 消</el-button>
                        <el-button type="primary" @click="updateVisible = true,select1(updategoods.gid)">确 定</el-button>
                    </span>
                        <el-dialog
                        :visible.sync="updateVisible"
                        title='修改商品信息'
                        width="25%"
                        >

                            <el-form>
                                <el-form-item label="输入修改后的商品编号">
                                <el-input v-model="updategoods.gid"></el-input>
                                </el-form-item>

                        
                        
                                <el-form-item label="输入修改后的商品名称">
                                <el-input v-model="updategoods.gname"></el-input>
                                </el-form-item>
                        
                            
                                <el-form-item label="输入修改后的商品单价">
                                <el-input v-model="updategoods.gpay"></el-input>
                                </el-form-item>
                        
                            
                                <el-form-item label="输入修改后的客户编号">
                                <el-input v-model="updategoods.cid"></el-input>
                                </el-form-item>
                            
                            

                            
                                <el-form-item label="输入修改后的商品简介">
                                <el-input v-model="updategoods.gintroduction"></el-input>
                                </el-form-item>
                        

                        
                                <el-form-item label="输入修改后的商品备注">
                                <el-input v-model="updategoods.other"></el-input>
                                </el-form-item>
                            </el-form>

                                <span slot="footer" >
                                    <el-button @click="updateVisible = false,dialogVisible3 = false">取 消</el-button>
                                    <el-button type="primary" @click="updateVisible = false,dialogVisible3 = false,update()">确 定</el-button>
                                </span>
                            </el-dialog>

                        </el-dialog>




                        <el-button type="primary" round @click="dialogVisible4=true">添加商品</el-button>
                        <el-dialog
                        title="添加商品信息"
                        :visible.sync="dialogVisible4"
                        width="20%"
                        >   
                            <el-form>

                            <!-- <el-form-item label="请输入商品的编号">
                                <span style="color:red">此为必填项</span>
                                <el-input v-model="addgoods.gid"></el-input>
                            </el-form-item> -->

                            
                            <el-form-item label="请输入商品的名称">
                                <span style="color:red">此为必填项</span>
                                <el-input v-model="addgoods.gname"></el-input>
                            </el-form-item>
                            <el-form-item label="请输入商品的单价">
                                <span style="color:red">此为必填项</span>
                                <el-input v-model="addgoods.gpay"></el-input>
                            </el-form-item>
                            <el-form-item label="请输入商品的客户编号">
                                <span style="color:red">此为必填项</span>
                                <el-input v-model="addgoods.cid"></el-input>
                            </el-form-item>
                            <el-form-item label="请输入商品简介">
                                <el-input v-model="addgoods.gintroduction"></el-input>
                            </el-form-item>
                            <el-form-item label="请输入员工的备注">
                                <el-input v-model="addgoods.other"></el-input>
                            </el-form-item>
                            </el-form>
                            
                            <span slot="footer" >
                                <el-button @click="dialogVisible4 = false">取 消</el-button>
                                <el-button type="primary" @click="dialogVisible4 = false,add()">确 定</el-button>
                            </span>
                    </el-dialog>




                       <el-button type="primary" round @click="csv()">导出表格</el-button>
                    <el-table v-bind:data="goodsData" border stripe style="width: 100%">
                      <el-table-column prop="gid" label="商品编号" width="150" ></el-table-column>
                      <el-table-column prop="gname" label="商品名称" width="150" ></el-table-column>
                      <el-table-column prop="gpay" label="商品单价" width="150" ></el-table-column>
                      <el-table-column prop="cid" label="客户编号" width="150"></el-table-column>
                      <el-table-column prop="gintroduction" label="商品简介" width="150" ></el-table-column>
                      <el-table-column prop="other" label="备注" width="150" ></el-table-column>
                    </el-table>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    data: function(){
        return{
             askgoods: {
                gid:'',
                gname:'',
                gpay:'',
                cid:'',
                gintroduction:'',
                other:''
            }, 
            addgoods: {
                 gid:'',
                gname:'',
                gpay:'',
                cid:'',
                gintroduction:'',
                other:''
            },
            updategoods: {
                gid:'',
                gname:'',
                gpay:'',
                cid:'',
                gintroduction:'',
                other:''
            }, 
            rmgoods: {
                gid:'',
                gname:'',
                gpay:'',
                cid:'',
                gintroduction:'',
                other:''
            },
            goodsData:[/* {
                gid:'',
                gname:'',
                gpay:'',
                cid:'',
                gintroduction:'',
                other:''
            } */],
           
            dialogVisible1: false,
            dialogVisible2: false,
            dialogVisible3: false,
            dialogVisible4: false,
            updateVisible: false,
            editVisible1: false,
            editVisible2: false,
            editVisible3: false,
            editVisible4: false,
            editVisible5: false,
            editVisible6: false,
            selectRes: false,
            tmptb: []
        }
    },methods: {
        //展示所有数据
        selectAll() {
        var that = this;
        axios.get("/TbGoodSelectAll").then(function (result) {
            if (result.data.code == 1) {
            that.goodsData = result.data.data; //result.data获取统一的json对象
            //result.data.data获取json对象中的属性data值
            } else {
             alert(result.data.msg);
            }
        });
        },
        //查
        select(gid) {
        var that = this;
        axios({
                method: "get",
                url: "/TbGoodSelectByGid/"+gid,
            }).then(result => {
            if(result.data.code==1){
                alert("查询成功");
                that.askgoods = result.data.data;
                that.tmptb[0]= that.askgoods;
                this.selectRes = true;
            }else{
                that.$message.error(result.data.msg);
            }
            })
        },
        select1(gid) {
        var that = this;
        axios({
                method: "get",
                url: "/TbGoodSelectByGid/"+gid,
            }).then(result => {
            if(result.data.code==1){
                alert("查询成功");
                that.updategoods = result.data.data;
                this.updateVisible = true;
            }else{
                that.$message.error(result.data.msg);
            }
            })
        },
        //增加
        add() {
        var that = this;
        axios.post("/TbGoodInsert",this.addgoods).then(function (result) {
            if (result.data.code==1){
                that.$message.success(result.data.msg);
                //关闭对话框
                that.dialogVisible4=false;
                //重新加载表格数据
                that.selectAll();
            }else {
                that.$message.error(result.data.msg);
            }
        });
        /* axios({
                method: "post",
                url: "/TbEmployeeInsert",
                params: this.addEmp
            }).then(result => {
            if (result.data.code==1){
                that.$message.success(result.data.msg);
                //关闭对话框
                that.dialogVisible4=false;
                //重新加载表格数据
                that.selectAll();
            }else {
                that.$message.error(result.data.msg);
            }
            }) */
        },
        //删除
        remove() {
        //提示框
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'info'
            }).then(() => {
                //通过axios调用我们的删除接口
                var that = this;
                axios.delete("/TbGoodDelete/"+ that.rmgoods.gid).then(function (result){
                    if (result.data.code==1){
                        //1.弹出一个信息
                        that.$message.success(result.data.msg);
                        //2.重新加载表格数据
                        that.selectAll();
                    }else {
                        //弹出一个信息
                        that.$message.error(result.data.msg)
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        update(){
        var that = this;
        // this.updateEmp = this.select(this.updateEmp.eid);
        axios.post("/TbGoodUpdate", this.updategoods).then(function (result) {
            if (result.data.code == 1) {
                that.$message.success(result.data.msg);
                //关闭对话框
                that.Visible = false;
                //重新加载表格数据
                that.selectAll();
            } else {
                that.$message.error(result.data.msg);
            }
        })
        },csv(){
        /*axios.get("/TbEmployeeExport") .then(function () {
            if (result.data.code == 1) {
                that.$message.success(result.data.msg);
                //关闭对话框
                that.Visible = false;
                //重新加载表格数据
                that.selectAll();
            } else {
                that.$message.error(result.data.msg);
            }
        }) */
        window.location.href = 'http://localhost:8083/TbGoodExport'


        window.open('http://localhost:8083/TbGoodExport', '_self'); // _self参数设置是为了不跳转到新界面上去
        let link = document.createElement('a')
            link.href = 'http://localhost:8083/TbGoodExport'
            link.download = '下载文件名册'
            link.click()


        }
    },
    mounted() {
        axios.get('/TbGoodSelectAll').then((result) => {
            if(result.data.code == 1){
                this.goodsData=result.data.data;
            }else{
                alert(result.data.msg);
            }
        });
    },created() {
        this.selectAll();
    },
}
</script>


<style>
    .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
</style>